<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素</title>
    <style>
        #d2{
            width: 300px;
            height: 200px;
            border: 1px red solid;
        }
        #d3{
            width: 300px;
            height: 200px;
            border: 1px rgb(28, 206, 146) solid;
        }
    </style>
</head>
<body>
    <!-- 2.新制作一个页面，要求：
       2.1 至少包含以下元素：3个DIV,标题，5个P标签，图片，列表 
       2.2 分别实现 id,类，标签三种方式查找以上元素 -->
    <div id="d1" class="cd1">
        <img src="./1.jpg" alt="此图只有本页有" width="300px" height="200px" id="s1" class="cs1">
    </div>
    <br />
    <div id="d2" class="cd2">
        <ol>
            <li id="l1" class="cl1">apple</li>
            <li id="l2" class="cl2">apple2</li>
            <li id="l3" class="cl3">apple3</li>
        </ol>
        <p id="p1" class="cp1">第一个段落</p>
        <p id="p2" class="cp2">第一个段落</p>
    </div>
    <br />
    <div id="d3" class="cd3">   
        <p id="p3" class="cp3">第二个段落</p>
        <p id="p4" class="cp4">第二个段落</p>
    </div>
        <p id="p5" class="cp5">第三个段落</p>
</body>
    <script>
        var divid=document.getElementById('d1');
        console.log(divid);
        var divclass=document.getElementsByClassName('cd2');
        console.log(divclass);
        var divbq=document.getElementsByTagName('div');
        console.log(divbq);

        console.log('----------------------------------------------');

        var pid=document.getElementById('p1');
        console.log(pid);
        var pclass=document.getElementsByClassName('cp5');
        console.log(pclass);
        var pbq=document.getElementsByTagName('p');
        console.log(pbq);

        console.log('----------------------------------------------');

        var imgid=document.getElementById('s1');
        console.log(imgid);
        var imgclass=document.getElementsByClassName('cs1');
        console.log(imgclass);
        var imgbq=document.getElementsByTagName('img');
        console.log(imgbq);

        console.log('----------------------------------------------');

        var l1id=document.getElementById('l1');
        console.log(l1id);
        var l2class=document.getElementsByClassName('cl2');
        console.log(l2class);
        var l3bq=document.getElementsByTagName('li');
        console.log(l3bq);

    </script>

</html>